<template>
  <view v-if="layout?.layout === 'FLEX'" :class="[ns.b(), ns.m('flex')]" :style="flexStyle">
    <slot></slot>
  </view>
  <uni-row v-else :class="[ns.b(), ns.m('grid')]"><slot></slot></uni-row>
</template>
<script setup lang="ts">
import { IFlexLayout, ILayout } from '@ibiz/model-core'
import { useNamespace } from '@/use'
const ns = useNamespace('row')

const props = defineProps({
  layout: Object as PropType<ILayout>,
})

const flexStyle = computed(() => {
  return `display:flex;flex-direction: ${(props.layout as IFlexLayout).dir || 'column'};justify-content: ${(props.layout as IFlexLayout).align || ''};align-items: ${(props.layout as IFlexLayout).valign || ''};`
})
</script>
